<template>
  <div class="box">
    <div class="main dispaly-just-between">
      <div class="left pointer dispaly-just-between" @click="state.cateShow = !state.cateShow">
        <div class="name">{{ state.cateItem.name ? state.cateItem.name : '分类' }}</div>
        <div class="icon">
          <img src="/src/assets/image/sjx.png">
        </div>
      </div>
      <div class="right">
        <input type="text" placeholder="搜索" v-model="state.searchKey" @keyup.enter.native="search">
      </div>

      <div class="cate" v-if="state.cateShow">
        <div class="item pointer" @click="clickCate(item)" v-for="(item, index) in state.cateList" :key="index">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive} from 'vue'
import {useRouter} from 'vue-router'

const state = reactive({
  cateShow: false,
  searchKey: '',
  cateList: [
    {name: '文化', type: 0},
    {name: '新闻', type: 1},
    {name: '公告', type: 2},
    {name: '企业', type: 3},
    {name: '成就', type: 4},
    {name: '作品', type: 5},
    {name: '常见问题', type: 6},
  ],
  cateItem: {}
})

// 搜索
const router = useRouter()
const search = () => {
  let searchData = {
    search: state.searchKey,
    type: state.cateItem.type,
    pageNum: 1,
    pageSize: 5,
    limit: 10
  }
  if (JSON.stringify(state.cateItem) == '{}') {
    searchData.type = state.cateList[0].type
  }
  router.push({
    path: '/search',
    query: {
      data: JSON.stringify(searchData)
    }
  })
}


// 点击cate
const clickCate = (item) => {
  state.cateItem = item
  state.cateShow = false
}
</script>

<style lang="scss" scoped>
$height: 34px;

.box {
  width: 340px;
  height: $height;

  .main {
    width: 340px;
    height: $height;
    background-color: #fff;
    border-radius: 5px;
    position: relative;
    .right {
      width: 220px;
      padding-left: 30px;

      input {
        height: $height;
        border: none;
      }

    }

    .left {
      padding: 0 22px;
      width: 120px;
      border-right: 2px solid #ccc;

      .name {
        font-family: MicrosoftYaHei;
        font-size: 16px;
        color: #111111;
      }

      .icon {
        img {
          width: 12px;
          height: 8px;
        }
      }
    }

    .cate {
      padding: 32px 21px;
      background-color: $primary-color;
      position: absolute;
      top: 34px;
      border-radius: 5px;
      left: 50px;
      max-height: 296px;
      overflow-y: scroll;
      z-index: 9999;

      .item:last-child {
        margin-bottom: 0;
      }


      .item {
        text-align: center;
        padding-bottom: 4px;
        margin-bottom: 27px;
        color: #fff;
        font-family: MicrosoftYaHei;
        font-size: 14px;
        color: #FFFFFF;
        border-bottom: 1px solid #ccc;
      }
    }
  }
}
</style>